import echarts from 'echarts'
import '../../../public/static/theme/chalk'

// 初始化图表
export const setEchartOptions = (ref, options) => {
  echarts.init(ref, 'chalk').setOption(options)
}

export const setEcharts = (
  ref,
  xAxisData = {},
  seriesData = {},
  start,
  end
) => {
  // 柱状图的渐变颜色
  const colorArr = [
    ['#0BA82C', '#4FF778'],
    ['#2E72BF', '#23E5E5'],
    ['#5052EE', '#AB6EE5']
  ]
  setEchartOptions(ref, {
    title: {
      show: true,
      text: '▍地区销售排行',
      textStyle: {
        color: 'white',
        fontSize: 30,
        fontWeight: 500
      },
      top: '10%',
      left: '8%'
    },
    grid: {
      top: '20%',
      left: '10%',
      bottom: '15%'
    },
    tooltip: {
      show: true,
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        show: false,
        startValue: start,
        endValue: end
      }
    ],
    series: [
      {
        type: 'bar',
        data: seriesData,
        barWidth: 60,
        itemStyle: {
          // 柱子的样式
          barBorderRadius: [50, 50, 0, 0],
          color: (args) => {
            let initColor = []
            if (args.value > 300) {
              initColor = colorArr[0]
            } else if (args > 200) {
              initColor = colorArr[1]
            } else {
              initColor = colorArr[2]
            }
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: initColor[0]
              },
              {
                offset: 1,
                color: initColor[1]
              }
            ])
          }
        }
        // label: {
        //   // 柱状图的文字显示样式等等
        //   show: true,
        //   textStyle: {
        //     color: 'white'
        //   },
        //   // color: 'white',
        //   rotate: 0,
        //   position: 'right'
        // }
      }
    ]
  })
}
